<template>
  <div>
    <ItemBox>
      <template #left> 本周热搜top5 </template>
      <template #content>
        <li v-for="item in list1" :key="item.id">
          <div class="content">#{{ item.text }}</div>
          <div class="tag">{{ item.hot }}</div>
        </li>
      </template>
    </ItemBox>
    <ItemBox>
      <template #left> 可能感兴趣的人 </template>
      <template #right> 换一批 </template>
      <template #content>
        <li v-for="item in list2" :key="item.id">
          <div class="content">
            {{ item.name }} {{ item.gender }} {{ item.age }}岁 <br />
            研究领域:{{ item.subject }} <br />
            {{ item.university }}:{{ item.job }}
          </div>
          <div class="add">+关注</div>
        </li>
      </template>
    </ItemBox>
  </div>
</template>
<script>
import ItemBox from './components/ItemBox.vue'
export default {
  components: {
    ItemBox
  },
  data () {
    return {
      list1: [
        { text: '区块链', hot: 99 },
        { text: '数据挖掘', hot: 89 },
        { text: '无人机', hot: 87 },
        { text: '生命科学', hot: 78 },
        { text: '传感器', hot: 90 }
      ],
      list2: [
        { name: '李国胜', age: 55, gender: '男', subject: '机电一体化技术', university: '哈尔滨工业大学', job: '教授' },
        { name: '陈颖', age: 36, gender: '女', subject: '人工智能', university: '清华大学', job: '副教授' }
      ]
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
